<template>
  <div class="hello">
    <van-nav-bar title="音乐详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    <p>{{ mInfo.musicName }}</p>
    <img :src="mInfo.albumPicUrl" class="img" />
    <p>{{ mInfo.albumName }}</p>
    <p>{{ mInfo.artistName }}</p>
    <p>{{ mInfo.navigationName }}</p>
    <audio :src="mInfo.musicMp3Url" controls></audio>
  </div>
</template>
<script>
import url from "../tools/url";
export default {
  name: "MusicDetail",
  data() {
    return {
      mInfo: {},
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },

  mounted() {
    var id = this.$route.query.id;
    var token = sessionStorage.getItem("token");
    var str = `musicId=${id}&token=${token}`;
    this.axios.post(url.GET_MDETAIL, str).then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        this.mInfo = res.data.data;
      } else {
        thsi.$router.push("/login");
      }
    });
  },
  computed: {},
};
</script>
<style scoped>
.hello {
  text-align: center;
}
.img {
  width: 90%;
  height: 30%;
}
</style>
